<template>
  <div class="contractTenant">
    <div class="wrapper">
      <div class="list">
        <div
          v-for="(item, index) in list"
          :key="item.id"
          class="detail">
          <i-swipeout
            :operate-width="0"
            :unclosable="false"
            :toggle="false">
            <div class="list-swipeout" slot="content" @tap="detailClick(item)">
              <div class="info">
                <div class="title">{{item.roomNo}}</div>
                <div class="local">{{item.roomAddress}}</div>
                <div class="desc">
                  <span class="price">租金：¥ <span class="status">{{item.rentMoney}}</span></span>
                  <span class="price">收租日 <span class="status">{{item.rentMoneyDate}}号</span></span>
                </div>
              </div>
            </div>
          </i-swipeout>
        </div>
      </div>

      <div class="loadingMore">
        <i-load-more v-if="isLoadingMore" />
        <div
          v-if="isNoMoreData"
          class="noMoreData">没有更多数据了</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { ERR_OK, pageSize } from 'api/config'
import { getList } from 'api/contractTenant'
import { shareMixin } from 'common/js/mixins'

export default {
  mixins: [shareMixin()],
  onShow () {
    this.page = 1
    this.getList('init', true)
  },
  onPullDownRefresh () {
    this.page = 1
    this.getList('init', false)
  },
  onReachBottom () {
    this.getMoreList()
  },
  mounted () {
    this.list = []
  },
  data () {
    return {
      page: 1,
      list: [],
      isLoadingMore: false,
      isNoMoreData: false
    }
  },
  methods: {
    detailClick (item) {
      this.SET_CURRENTITEM(item)
      wx.navigateTo({
        url: '/pages/contractTenantDetail/main'
      })
    },
    getMoreList () {
      if (this.isNoMoreData) {
        return
      }
      this.isLoadingMore = true
      this.page += 1
      this.getList('more', false)
    },
    async getList (type = 'init', isShowLoading = true) {
      if (isShowLoading) {
        this.$showLoading('加载中')
      }

      const res = await getList(this.page)

      if (isShowLoading) {
        wx.hideLoading()
      } else {
        wx.stopPullDownRefresh()
      }

      if (res.code === ERR_OK) {
        if (type === 'init') {
          this.list = res.rows
          this.isNoMoreData = false
          this.isLoadingMore = false
        } else if (type === 'more') {
          this.list = [...this.list, ...res.rows]
          this.isLoadingMore = false
        }

        if (res.rows.length < pageSize) {
          this.isNoMoreData = true
        }
      }
    },
    ...mapMutations({
      'SET_CURRENTITEM': 'contractTenantDetail/SET_CURRENTITEM'
    })
  }
}
</script>

<style lang="scss" scoped>
  @import '~common/scss/color';

  .contractTenant {
    width: 100%;
    height: 100%;
    position: relative;
    > .wrapper {
      width: 100%;
      height: 100%;
      position: relative;
      > .list {
        width: 100%;
        > .detail {
          .list-swipeout {
            > .info {
              color: black;
              > .title {
                font-size: 16px;
              }
              > .local {
                margin: 2px 0;
              }
              > .desc {
                 .status {
                  margin-right: 10px;
                  color: $color-default;
                  &.yes {
                    color: $color-success;
                  }
                  &.no {
                    color: $color-error;
                  }
                  &.remind {
                    color: $color-warning;
                  }
                }
              }
            }
          }
          .detail-btn {
            height: 100%;
            display: flex;
            > .btn {
              flex: 1;
              height: 100%;
              background-color: $color-default;
              color: white;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
    }
  }
</style>
